<template>
	<view>
		<button v-if="isShowBtn" class="iconfont icon-jiahao" @click="addAddress">添加地址</button>
	</view>
	<view v-if="!isShowBtn" class="consignee" @click="addAddress">
		<view class="consignee_top clear">
			<view class="consignee_top_username left">
				收货人：{{consignee.userName}}
			</view>
			<view class="consignee_top_tel right">
				{{consignee.telNumber}}
			</view>
		</view>
		<view class="consignee_bottom clear">
			<view class="iconfont icon-dingwei left"></view>
			<view class="consignee_bottom_address left">
				{{consignee.provinceName + consignee.cityName + consignee.countyName + consignee.detailInfo}}
			</view>
			<view class="iconfont icon-youjiantou_huaban consignee_bottom_iconR right"></view>
		</view>
	</view>
	<view class="order">
		<view class="order-product">
			<image class="order-product_img" :src="order.img" mode="widthFix"></image>
			<view class="order-product_info">
				<view class="order-product_info_name">{{order.name}}</view>
				<view class="order-product_type">{{order.type}}</view>
				<view class="order-product_price">￥{{order.price}}元</view>
			</view>
		</view>
		<view class="order_item">
			<view>运费</view>
			<view>{{order.freight}}</view>
		</view>
		<view class="order_item">
			<view class="">数量</view>
			<view class="">
				<uni-number-box v-model="order.count" min="1"></uni-number-box>
			</view>
		</view>
		<view class="order_item">
			<view class="">优惠券</view>
			<view class="">请选择<text class="iconfont icon-youjiantou_huaban"></text></view>
		</view>
		<view class="order_last">
			<checkbox value="cb" />积分抵扣
		</view>
	</view>
	<view class="bottom">
		<view class="bottom_price">
			<text>合计金额</text>
			<text class="bottom_price_num">{{price}}元</text>
		</view>
		<view class="bottom_btn" @click="toggle('center')">
			提交订单
		</view>
	</view>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<image src="/static/images/zhifu.jpg" mode="widthFix"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.ts'; //需要引入store
	export default {
		data() {
			return {
				consignee: {},
				isShowBtn: true,
				order: {
					img: '/static/Luffy.jpg',
					name: '绘本名称',
					type: '绘本',
					price: '168.00',
					freight: '顺丰包邮',
					count: 1,
					isDeduction: false
				},
				price: '158.00',
				type: 'center',
			}
		},
		methods: {
			addAddress() {
				let that = this
				uni.chooseAddress({
					success(res) {
						that.consignee = res
						that.isShowBtn = false
						store.dispatch('setConsignee', res)
					},
					fail(err) {
						throw err
					}
				})
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
		},
		onLoad() {
			if (store.state.placeOrder.consignee.userName) {
				this.consignee = store.state.placeOrder.consignee
				this.isShowBtn = false
			}
		},
	}
</script>

<style scoped>
	.consignee{
		line-height: 40px;
	}
	.icon-dingwei{
		color: #8dc7f8;
	}
	.consignee_bottom_address{
		color: #999999;
	}
	.order-product {
		margin-top: 20px;
		padding: 20px 10px;
		border-top: 1px solid #cdcdcd;
		border-bottom: 1px solid #cdcdcd;
		display: flex;
	}

	.order-product_img {
		width: 100px;
	}

	.order-product_info {
		height: 100px;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.order-product_info_name {}

	.order-product_type {
		width: 60px;
		text-align: center;
		border: 1px solid #ff1a1a;
		color: #ff1a1a;
	}

	.order-product_price {
		color: #ff0000;
		font-weight: 800;
	}

	.order_item {
		padding: 10px;
		border-bottom: 1px solid #cdcdcd;
		display: flex;
		justify-content: space-between;
	}

	.order_last {
		padding: 10px;
		border-bottom: 1px solid #cdcdcd;
		display: flex;
		justify-content: flex-end;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.bottom_btn {
		width: 33.333333%;
		background-color: #ff0000;
		color: white;
	}

	.bottom_price_num {
		font-weight: 800;
		color: #ff0000;
		margin: 0 10px;
	}
</style>
